<template>
	<view class="blindboxcontainer">
		<view v-if="showModal" class="modal-overlay">
			<view class="modal-content">
				<view class="modal-header">
					<text>今天吃{{dishname}}！</text>
				</view>
				<view class="modal-body">
					<text>需要导航到店吗？</text>
					<view class="restaurant">
						<image class="res-avatar" :src='respic' mode="auto"></image>
						<view class="tag">店铺</view>
						<view class="res-info">
							<view class="res-name">{{resname}}</view>
							<view class="res-location">
								<image class="loc-icon" src="/static/home/main/details/icon-position.png"
									mode=" aspectFit"></image>
								<view class="loc-text">{{location}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<button @click="navigateToStore" class="navigating">导航到店铺（高德地图）</button>
					<button @click="showModal = false" class="cancel">不了</button>
				</view>
			</view>
		</view>
		<view class="blindboxpage">
			<image v-if="pageid==1" class="backpic" src="/static/home/blind box/blindbox/new-blindbox-backgound.png"
				mode="aspectFill">
				<image v-if="pageid==2" class="backpic" src="/static/home/blind box/blindbox/fav-blindbox-backgound.png"
					mode="aspectFill">
					<view class="return" @click="goHome()">
						<image class="arrow" src="/static/home/blind box/blindbox/arrow.png" mode='aspectFill'></image>
						<view class="return-bttn">返回</view>
					</view>
					<view class="title" v-if="pageid==1">尝鲜盲盒</view>
					<view class="title" v-if="pageid==2">最爱盲盒</view>
					<view class="box">
						<view class="backgrnd">
							<view class="name">{{dishname}}</view>
							<image class="image" :src="dishpic" mode='auto' @click="godetails()"></image>
							<view class="ratings">
								<view class="dish-rating">评分</view>
								<view class="star-value">{{rate}}</view>
								<image class="star-icon" src='/static/home/blind box/blindbox/star.png'></image>
							</view>
							<view class="prices">
								<view class="dish-pricing">估价</view>
								<view class="cny">¥ {{ price}}</view>
							</view>
							<view class="restaurant">
								<image class="res-avatar" mode="aspectFill" :src='respic'></image>
								<view class="tag">店铺</view>
								<view class="res-name">{{resname}}</view>
							</view>
						</view>
					</view>
					<view class="buttons">
						<view class="bttn-pick" @click="eatThis()">
							<image src="/static/home/blind box/blindbox/eat.png" mode="widthFix" class="bttn-img">
							</image>
						</view>
						<view class="bttn-retry" @click="retry()">
							<image src="/static/home/blind box/blindbox/change.png" mode="auto" class="bttn-img">
							</image>
						</view>

						<view class="bttn-block" @click="block()">
							<image src="/static/home/blind box/blindbox/blacklist.png" mode="heightFix"
								class="bttn-img"></image>
						</view>
					</view>
				</image>
		</view>
	</view>
</template>
<script>
	export default {

		data() {
			return {
<<<<<<< HEAD

				showModal: false,
				pageid: '1',
				dishname: '无',
				disid: 0,
				price: '0',
				rate: '5.0',
				dishpic: '/static/home/blind box/blindbox/back-image.png',
				resname: '无',
				resid: 0,
				respic: '',
				userid: 0,
				location: '',
				likeid: 0,
			};
		},
		onLoad(options) {
			this.pageid = options.id
=======
				
				showModal:false,
				pageid:'1',
				dishname:'无',
				disid:0,
				price:'0',
				rate:'5.0',
				dishpic:'/static/home/blind box/blindbox/back-image.png',				
				resname:'无',
				resid:0,
				respic:'',
				userid:0,
				location:'',
				likeid:0,
				dishHistory:[],
			};
		},
		onLoad(options){
			console.log(55555555555555555555)//
			
			this.eatThis()
					
			
			
			this.showHistory()
			console.log("历史记录如下")
			console.log(this.dishHistory)
			this.pageid=options.id
>>>>>>> cf370fbbdd0e2619b30401affbcab9dcb463763f
			console.log(this.pageid)

			this.fetchdishdata()
			const userInfo = uni.getStorageSync('userInfo');
			this.userInfo.id = userInfo.data.id;
			this.userInfo.userName = userInfo.data.userName;
<<<<<<< HEAD

			console.log(55555555555555555555) //
			console.log(userInfo.data.id) //缓存中的ID			
		},
		methods: {
			fetchdishdata() {
				{
					uni.request({
						url: "http://localhost:8080/randomblindbox/open",
						method: "GET",
						success: (res) => {
							console.log("数据：")
							console.log(res.data)
							this.dishname = res.data.data.name
							this.price = res.data.data.price
							this.rate = this.formatNumber(res.data.data.stars)
							this.dishpic = res.data.data.image
							this.resid = res.data.data.restaurantId
							this.disid = res.data.data.id
							this.fetchresdata(this.resid)
							console.log("菜品的id" + this.disid)
							this.currentDishData = res.data.data;
						},
						fail: (err) => {
							console.error(err)
							// 在这里处理请求失败的逻辑
						}
					})
				}
			},
			fetchresdata(id) {
				uni.request({
					url: "http://localhost:8080/restaurant/details/" + id,
					methods: "GET",
					success: (res) => {
						console.log("店铺数据")
						this.resname = res.data.data.name
						this.respic = res.data.data.picUrl
						this.location = res.data.data.restaurantAddress
						console.log(res.data)
					},
					fail: (err) => {
						console.error(err)
						// 在这里处理请求失败的逻辑
					}
				})

			},
			godetails() {

				uni.navigateTo({
					url: '/pages/details/details?id=' + this.disid
				})

			},
			goHome() {
				uni.navigateBack(
				);
				/* uni.switchTab({
					url: "/pages/index/index"
				}) */
			},
			eatThis() {
				console.log('eat this');
				this.showModal = true;

				// 记录当前的 dish 数据
				if (this.currentDishData) {
					this.recordDishData(this.currentDishData);
				}
			},
			recordDishData(dishData) {
				// 读取本地存储中的历史记录
				uni.getStorage({
					key: 'dishHistory',
					success: (res) => {
						let dishHistory = res.data || [];

						// 获取餐厅信息，这里假设 dishData 中已经包含了 restaurantId 和对应的 name
						let restaurantInfo = {
							id: dishData.restaurantId,
							name: this.resname, // 假设你从接口中获取到了 restaurantName
							picUrl: this.respic, // 假设你已经获取到了餐厅图片 picUrl
							location: this.location // 假设你已经获取到了餐厅地址 location
						};
						// 查找是否已经存在相同的菜品
						const existingIndex = dishHistory.findIndex(item => item.dish.id === dishData.id);

						if (existingIndex !== -1) {
							// 如果已经存在，删除该菜品
							dishHistory.splice(existingIndex, 1);
							console.log('已删除重复的菜品');
						}
						// 将菜品和餐厅信息一起保存到历史记录中
						dishHistory.push({
							dish: {
								id: dishData.id,
								name: dishData.name,
								price: dishData.price,
								stars: dishData.stars,
								image: dishData.image
							},
							restaurant: restaurantInfo
						});

						// 将更新后的历史记录存储到本地
						uni.setStorage({
							key: 'dishHistory',
							data: dishHistory,
							success: () => {
								console.log('dish 数据记录成功');
								console.log(dishHistory);
							},
							fail: (err) => {
								console.error('dish 数据记录失败', err);
							}
						});
					},
					fail: (err) => {
						console.log(this.resname)
						// 如果读取失败（例如第一次运行时没有数据），初始化一个空数组
						let dishHistory = [{
							dish: {
								id: dishData.id,
								name: dishData.name,
								price: dishData.price,
								stars: dishData.stars,
								image: dishData.image
							},
							restaurant: {
								id: dishData.restaurantId,
								name: this.resname,
								picUrl: '',
								location: ''
							}
						}];

						// 将初始化的历史记录存储到本地
						uni.setStorage({
							key: 'dishHistory',
							data: dishHistory,
							success: () => {
								console.log('dish 数据记录成功');
								console.log(dishHistory);
							},
							fail: (err) => {
								console.error('dish 数据记录失败', err);
							}
						});
					}
				});
			},
			retry() {
				console.log('retry')
=======
			
			
					
		},
		methods:{
			fetchdishdata(){
							{
								uni.request({
								url:"http://8.138.90.16:8080/randomblindbox/open"
								,
								method:"GET",
								success:(res)=>{
									console.log("数据：")
									console.log(res.data)						
									this.dishname=res.data.data.name
									this.price=res.data.data.price
									this.rate=this.formatNumber(res.data.data.stars)
									this.dishpic=res.data.data.image
									this.resid=res.data.data.restaurantId
									this.disid=res.data.data.id
									this.fetchresdata(this.resid)
									console.log("菜品的id"+this.disid)
									this.currentDishData = res.data.data;
									
								},
								fail: (err) => {
								  console.error(err)
								  // 在这里处理请求失败的逻辑
								}									
								})
							}
						},
						showHistory() {
						   // 读取本地存储中的历史记录
						   uni.getStorage({
						     key: 'dishHistory',
						     success: (res) => {
											console.log("读取成功")
						       this.dishHistory = res.data || [];
						     },
						     fail: (err) => {
						     console.error('读取历史记录失败', err);		          
						     }
						   });
						 },
						fetchresdata(id){
							uni.request({
							url:"http://8.138.90.16:8080/restaurant/details/"+id
							,
							methods:"GET",
							success:(res)=>{	
								console.log("店铺数据")
								this.resname=res.data.data.name
								this.respic=res.data.data.picUrl
								this.location=res.data.data.restaurantAddress
								console.log(res.data)
							},
							fail: (err) => {
							  console.error(err)
							  // 在这里处理请求失败的逻辑
							}								
							})
							
						},
						godetails(){
							
								uni.navigateTo({
									url:'/pages/details/details?id='+this.disid
								  })
								  
						},
						goHome(){				
							uni.switchTab({
								url:"/pages/index/index"
							})
						},					  
						   eatThis() {
						   		console.log('eat this');
						   		this.showModal = true;			      
						   			      // 记录当前的 dish 数据
						   		if (this.currentDishData) {
						   			this.recordDishData(this.currentDishData);
						   	 }						    
						},
							
						    recordDishData(dishData) {
						      // 读取本地存储中的历史记录
						      uni.getStorage({
						        key: 'dishHistory',
						        success: (res) => {
						          let dishHistory = res.data || [];
						          
						          // 获取餐厅信息，这里假设 dishData 中已经包含了 restaurantId 和对应的 name
						          let restaurantInfo = {
						            id: dishData.restaurantId,
						            name:this.resname, // 假设你从接口中获取到了 restaurantName
						            picUrl: this.respic, // 假设你已经获取到了餐厅图片 picUrl
						            location: this.location // 假设你已经获取到了餐厅地址 location
						          };
						    
						          // 将菜品和餐厅信息一起保存到历史记录中
						          dishHistory.push({
						            dish: {
						              id: dishData.id,
						              name: dishData.name,
						              price: dishData.price,
						              stars: dishData.stars,
						              image: dishData.image
						            },
						            restaurant: restaurantInfo
						          });
						    
						          // 将更新后的历史记录存储到本地
						          uni.setStorage({
						            key: 'dishHistory',
						            data: dishHistory,
						            success: () => {
						              console.log('dish 数据记录成功');
						              console.log(dishHistory);
						            },
						            fail: (err) => {
						              console.error('dish 数据记录失败', err);
						            }
						          });
						        },
						        fail: (err) => {
								console.log(this.resname)
						          // 如果读取失败（例如第一次运行时没有数据），初始化一个空数组
						          let dishHistory = [{
						            dish: {
						              id: dishData.id,
						              name: dishData.name,
						              price: dishData.price,
						              stars: dishData.stars,
						              image: dishData.image
						            },
						            restaurant: {
						              id: dishData.restaurantId,
						              name: this.resname,
						              picUrl: '',
						              location: ''
						            }
						          }];
						    
						          // 将初始化的历史记录存储到本地
						          uni.setStorage({
						            key: 'dishHistory',
						            data: dishHistory,
						            success: () => {
						              console.log('dish 数据记录成功');
						              console.log(dishHistory);
						            },
						            fail: (err) => {
						              console.error('dish 数据记录失败', err);
						            }
						          });
						        }
						      });
						    },
			retry(){
				console.log('retry')												
>>>>>>> cf370fbbdd0e2619b30401affbcab9dcb463763f
				this.fetchdishdata()

			},
			clearHistory() {
				uni.removeStorage({
					key: 'dishHistory',
					success: () => {
						console.log('历史记录已清空');
					},
					fail: (err) => {
						console.error('清空历史记录失败', err);
					}
				});
			},
			block() {
				console.log('拉黑')
				uni.request({
					url: "http://localhost:8080/preference/" + this.userid + "/addDishToMenu?menuId=0&dishId=" +
						this.disid,
					method: "POST",
					success: (res) => {
						uni.showToast({
							icon: 'success',
							title: "已加入黑名单"
						})
						console.log(res.data)
					},
					fail: (err) => {
						console.error("失败")
						// 在这里处理请求失败的逻辑
					}
				})
			},
			formatNumber(num) {
				return parseFloat(num).toFixed(1);
			}
		}
	}
</script>

<style lang="scss">
	.modal-overlay {
		z-index: 2;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;

		.modal-content {
			background: #fff;
			border-radius: 20px;
			width: 80%;
			max-width: 300px;
			padding: 20px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

			.modal-header {
				text-align: center;
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 20px;
			}

			.modal-body {
				text-align: center;
				margin-bottom: 20px;

				.restaurant {
					margin-top: 5vh;
					width: 90%;
					border-radius: 20rpx;
					background-color: #E5E5E5;
					margin-left: 4.5vw;
					display: flex;
					flex-direction: row;

					.res-avatar {

						width: 5vh;
						height: 5vh;
						margin-left: 4vw;
						border-radius: 50rpx;
					}

					.tag {
						margin-top: 10rpx;

						margin-left: 5rpx;
						height: 35rpx;
						background-color: #A6A6A6;
						width: 60rpx;
						color: #E3E3E3;
						font-size: 23rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 10rpx;
					}

					.res-name {
						margin-left: 5rpx;
						margin-top: 5rpx;
						font-size: 23rpx;
					}

					.res-location {
						font-size: 23rpx;
						height: 1vh;
						display: flex;
						flex-direction: row;

						.loc-icon {
							padding-top: 13rpx;
							width: 3vw;
							height: 3.5vw;
						}

						.loc-text {
							margin-top: 0.5vh;
							margin-left: 1vw;
							color: #808080;
						}
					}




				}
			}

			.modal-footer {
				margin-top: 10vh;
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.navigating {
					color: #FF8D1A;
					width: 100%;
					background-color: #FFFFFF;
				}

				.cancel {
					color: #FF8D1A;
					width: 100%;
					background-color: #FFFFFF;
				}
			}

		}

	}

	.blindboxpage {
		width: 100%;
		display: flex;
		flex-direction: column;

		.backpic {
			width: 100%;
			height: 100%;
			position: absolute;
		}

		.return {
			z-index: 1;
			margin-top: 2vh;
			display: flex;
			height: 5vh;
			width: 30vw;

			.arrow {
				width: 3vh;
				height: 3vh;
				margin-left: 3vw;
				margin-top: 2.5vh;
			}

			.return-bttn {
				font-size: 2.5vh;
				color: #FFFFFF;
				margin-top: 2vh;
			}
		}

		.title {
			color: #FFFFFF;
			font-size: 5vh;
			margin-left: 5vw;
			margin-top: 2vh;
			z-index: 1;
			font-weight: 600;
		}

		.box {
			margin-left: 15%;
			margin-right: 15%;
			z-index: 1;
			display: flex;
			flex-direction: column;

			.backgrnd {
				margin-top: 5vh;

				background-color: #FFFFFF;
				width: 100%;
				height: 49vh;
				border-radius: 20rpx;

				.name {
					width: 100%;
					margin-top: 2vh;
					text-align: center;
					color: #383838;
					font-size: 2.6vh;
				}

				.image {
					margin-top: 2vh;
					margin-left: 118rpx;
					width: 280rpx;
					height: 280rpx;
					border-radius: 30rpx;

				}

				.prices {
					display: flex;
					margin-left: 22vw;
					margin-top: 1vh;
				}

				.dish-pricing {
					color: #A0A0A0;
					margin-top: 8rpx;
				}

				.cny {
					margin-left: 5vw;
					color: grey;
					font-size: 2.5vh;

					font-weight: 650;
				}

				.ratings {
					display: flex;
					margin-left: 22vw;
					margin-top: 3vh;
					width: 80vw;
				}

				.star-icon {
					width: 35rpx;
					height: 35rpx;
					margin-top: 14rpx;

				}

				.star-value {
					padding-bottom: 2vh;
					margin-left: 5vw;
					color: #FF8D1A;
					font-size: 40rpx;
					font-weight: bold;

				}

				.dish-rating {
					margin-top: 5rpx;
					color: #A0A0A0;
				}

				.restaurant {
					margin-top: 2vh;
					margin-left: 5vw;
					display: flex;
					flex-direction: row;

					.res-avatar {
						width: 5vh;
						height: 5vh;
						margin-left: 4vw;
						border-radius: 50rpx;
					}

					.tag {
						margin-left: 5rpx;
						height: 40rpx;
						background-color: #A6A6A6;
						width: 60rpx;
						color: #E3E3E3;
						font-size: 23rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 10rpx;
					}

					.res-name {
						font-size: 25rpx;
						margin-top: 3vh;
						margin-left: -8vw;
					}
				}
			}
		}

		.buttons {
			width: fit-content;
			display: flex;
			flex-direction: column;
			margin-left: 32%;
			margin-right: 32%;
			margin-top: 1vh;

			.bttn-pick {
				margin-top: 1vh;
				width: fit-content;
			}

			.bttn-retry {
				margin-top: 1vh;
				width: fit-content;
			}

			.bttn-block {
				margin-top: 1vh;
				width: fit-content;
			}

		}

		.bttn-img {
			width: 35vw;
			height: 5.5vh;
		}

	}
</style>